<!DOCTYPE html>
<!-- This site was created with Wowchemy. https://www.wowchemy.com -->
<!-- Last Published: August 30, 2023 --><html lang="en-us" >


<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  
  
  
    <meta name="generator" content="Wowchemy 5.7.0 for Hugo" />
  

  
  












  
  










  







  
  

  
  
  

  
  

  
  
    
    <script src="/robot/js/mathjax-config.js"></script>
  

  

  <link rel="stylesheet" href="/robot/css/vendor-bundle.min.047268c6dd09ad74ba54a0ba71837064.css" media="print" onload="this.media='all'">

  
  
  
    
    
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/academicons@1.9.2/css/academicons.min.css" integrity="sha512-KlJCpRsLf+KKu2VQa5vmRuClRFjxc5lXO03ixZt82HZUk41+1I0bD8KBSA0fY290ayMfWYI9udIqeOWSu1/uZg==" crossorigin="anonymous" media="print" onload="this.media='all'">
    

    
    
    
    
      
      
    
    
    

    
    
    

    

    
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
    
      
      

      
      

      
        <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" integrity="" crossorigin="anonymous" async></script>
      
    
      
      

      
      

      
    
      
      

      
      

      
    
  

  
  
  
  
  
  
  <link rel="stylesheet" href="/robot/css/wowchemy.eca19f1392e4de1c5a5fcd64903700e2.css" />

  
  
  

  
  
  
  
  
  
  
    
    
    <link rel="stylesheet" href="/robot/css/libs/chroma/github-light.min.css" title="hl-light" media="print" onload="this.media='all'" >
    <link rel="stylesheet" href="/robot/css/libs/chroma/dracula.min.css" title="hl-dark" media="print" onload="this.media='all'" disabled>
  

  
  


























  
  
  






  <meta name="author" content="L G" />





  

<meta name="description" content="Wowchemy is designed to give technical content creators a seamless experience. You can focus on the content and Wowchemy handles the rest.
Highlight your code snippets, take notes on math classes, and draw diagrams from textual representation." />



<link rel="alternate" hreflang="en-us" href="https://fitsir.gitee.io/robot/post/writing-technical-content/" />
<link rel="canonical" href="https://fitsir.gitee.io/robot/post/writing-technical-content/" />



  <link rel="manifest" href="/robot/manifest.webmanifest" />



<link rel="icon" type="image/png" href="/robot/media/icon_hu0b7a4cb9992c9ac0e91bd28ffd38dd00_9727_32x32_fill_lanczos_center_3.png" />
<link rel="apple-touch-icon" type="image/png" href="/robot/media/icon_hu0b7a4cb9992c9ac0e91bd28ffd38dd00_9727_180x180_fill_lanczos_center_3.png" />

<meta name="theme-color" content="#1565c0" />










  






<meta property="twitter:card" content="summary_large_image" />

  <meta property="twitter:site" content="@wowchemy" />
  <meta property="twitter:creator" content="@wowchemy" />
<meta property="twitter:image" content="https://fitsir.gitee.io/robot/post/writing-technical-content/featured.jpg" />
<meta property="og:site_name" content="机器人实验室" />
<meta property="og:url" content="https://fitsir.gitee.io/robot/post/writing-technical-content/" />
<meta property="og:title" content="Writing technical content in Markdown | 机器人实验室" />
<meta property="og:description" content="Wowchemy is designed to give technical content creators a seamless experience. You can focus on the content and Wowchemy handles the rest.
Highlight your code snippets, take notes on math classes, and draw diagrams from textual representation." /><meta property="og:image" content="https://fitsir.gitee.io/robot/post/writing-technical-content/featured.jpg" /><meta property="og:locale" content="en-us" />

  
    <meta
      property="article:published_time"
      content="2019-07-12T00:00:00&#43;00:00"
    />
  
  
    <meta property="article:modified_time" content="2019-07-12T00:00:00&#43;00:00">
  






    






  




<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://fitsir.gitee.io/robot/post/writing-technical-content/"
  },
  "headline": "Writing technical content in Markdown",
  
  "image": [
    "https://fitsir.gitee.io/robot/post/writing-technical-content/featured.jpg"
  ],
  
  "datePublished": "2019-07-12T00:00:00Z",
  "dateModified": "2019-07-12T00:00:00Z",
  
  "author": {
    "@type": "Person",
    "name": "L G"
  },
  
  "publisher": {
    "@type": "Organization",
    "name": "机器人实验室",
    "logo": {
      "@type": "ImageObject",
      "url": "https://fitsir.gitee.io/robot/media/icon_hu0b7a4cb9992c9ac0e91bd28ffd38dd00_9727_192x192_fill_lanczos_center_3.png"
    }
  },
  "description": "Wowchemy is designed to give technical content creators a seamless experience. You can focus on the content and Wowchemy handles the rest.\nHighlight your code snippets, take notes on math classes, and draw diagrams from textual representation."
}
</script>

  

  




  
  
  

  
  

  


  
  <title>Writing technical content in Markdown | 机器人实验室</title>

  
  
  
  











</head>


<body id="top" data-spy="scroll" data-offset="70" data-target="#TableOfContents" class="page-wrapper   " data-wc-page-id="07e02bccc368a192a0c76c44918396c3" >

  
  
  
  
  
  
  
  
  
  <script src="/robot/js/wowchemy-init.min.ec9d49ca50e4b80bdb08f0417a28ed84.js"></script>

  


<aside class="search-modal" id="search">
  <div class="container">
    <section class="search-header">

      <div class="row no-gutters justify-content-between mb-3">
        <div class="col-6">
          <h1>Search</h1>
        </div>
        <div class="col-6 col-search-close">
          <a class="js-search" href="#" aria-label="Close"><i class="fas fa-times-circle text-muted" aria-hidden="true"></i></a>
        </div>
      </div>

      <div id="search-box">
        
        <input name="q" id="search-query" placeholder="Search..." autocapitalize="off"
        autocomplete="off" autocorrect="off" spellcheck="false" type="search" class="form-control"
        aria-label="Search...">
        
      </div>

      
      

      

    </section>
    <section class="section-search-results">

      <div id="search-hits">
        
      </div>

    </section>
  </div>
</aside>



  <div class="page-header header--fixed">
  
  
  
  
  












<header>
  <nav class="navbar navbar-expand-lg navbar-light compensate-for-scrollbar" id="navbar-main">
    <div class="container-xl">

      
      <div class="d-none d-lg-inline-flex">
        <a class="navbar-brand" href="/robot/">机器人实验室</a>
      </div>
      

      
      <button type="button" class="navbar-toggler" data-toggle="collapse"
              data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
      <span><i class="fas fa-bars"></i></span>
      </button>
      

      
      <div class="navbar-brand-mobile-wrapper d-inline-flex d-lg-none">
        <a class="navbar-brand" href="/robot/">机器人实验室</a>
      </div>
      

      
      
      <div class="navbar-collapse main-menu-item collapse justify-content-start" id="navbar-content">

        
        <ul class="navbar-nav d-md-inline-flex">
          

          

          
          
          
            
          

          

          
          
          
          

          
            
              
              
            
            
              
              
              
                
              
              
            
          

          <li class="nav-item">
            <a class="nav-link " href="/robot/#about"><span>首页</span></a>
          </li>

          
          

          

          
          
          
            
          

          

          
          
          
          

          
            
              
              
            
            
          

          <li class="nav-item">
            <a class="nav-link " href="/robot/teaching"><span>教学活动</span></a>
          </li>

          
          

          

          
          
          
            
          

          

          
          
          
          

          
            
              
              
            
            
              
              
              
                
              
              
            
          

          <li class="nav-item">
            <a class="nav-link " href="/robot/#projects"><span>科学研究</span></a>
          </li>

          
          

          

          
          
          
            
          

          

          
          
          
          

          
            
              
              
            
            
          

          <li class="nav-item">
            <a class="nav-link " href="/robot/people"><span>研究队伍</span></a>
          </li>

          
          

          

          
          
          
            
          

          

          
          
          
          

          
            
              
              
            
            
              
              
              
                
              
              
            
          

          <li class="nav-item">
            <a class="nav-link " href="/robot/#publications"><span>学术发表</span></a>
          </li>

          
          

          

          
          
          
            
          

          

          
          
          
          

          
            
              
              
            
            
          

          <li class="nav-item">
            <a class="nav-link " href="/robot/about"><span>关于我们</span></a>
          </li>

          
          

        

          
        </ul>
      </div>

      <ul class="nav-icons navbar-nav flex-row ml-auto d-flex pl-md-2">

        
        
          
        
          
        

        
        
        
        <li class="nav-item">
          <a class="nav-link js-search" href="#" aria-label="Search"><i class="fas fa-search" aria-hidden="true"></i></a>
        </li>
        

        
        
        
        <li class="nav-item dropdown theme-dropdown">
          <a href="#" class="nav-link" data-toggle="dropdown" aria-haspopup="true" aria-label="Display preferences">
            <i class="fas fa-moon" aria-hidden="true"></i>
          </a>
          <div class="dropdown-menu">
            <a href="#" class="dropdown-item js-set-theme-light">
              <span>Light</span>
            </a>
            <a href="#" class="dropdown-item js-set-theme-dark">
              <span>Dark</span>
            </a>
            <a href="#" class="dropdown-item js-set-theme-auto">
              <span>Automatic</span>
            </a>
          </div>
        </li>
        

        
        

      </ul>

    </div>
  </nav>
</header>


  </div>

  <div class="page-body">
    
    
    

    <article class="article">

  






















  
  


<div class="article-container pt-3">
  <h1>Writing technical content in Markdown</h1>

  

  


<div class="article-metadata">

  
  

  
  <span class="article-date">
    
    
      
    
    2019-07-12
  </span>
  

  

  
  <span class="middot-divider"></span>
  <span class="article-reading-time">
    6 min read
  </span>
  

  
  
  
  

  
  

</div>

  





</div>


<div class="article-header container featured-image-wrapper mt-4 mb-4" style="max-width: 1200px; max-height: 800px;">
  <div style="position: relative">
    <img src="/robot/post/writing-technical-content/featured_huc72159e0fc0d14b85f60d34436a630f0_266353_1200x2500_fit_q75_h2_lanczos.webp" width="1200" height="800" alt="" class="featured-image">
    <span class="article-header-caption">Image credit: <a href="https://unsplash.com/photos/OGZtQF8iC0g" target="_blank" rel="noopener"><strong>John Moeses Bauan</strong></a></span>
  </div>
</div>



  <div class="article-container">

    <div class="article-style">
      <p>Wowchemy is designed to give technical content creators a seamless experience. You can focus on the content and Wowchemy handles the rest.</p>
<p><strong>Highlight your code snippets, take notes on math classes, and draw diagrams from textual representation.</strong></p>
<p>On this page, you&rsquo;ll find some examples of the types of technical content that can be rendered with Wowchemy.</p>
<h2 id="examples">Examples</h2>
<h3 id="code">Code</h3>
<p>Wowchemy supports a Markdown extension for highlighting code syntax. You can customize the styles under the <code>syntax_highlighter</code> option in your <code>config/_default/params.yaml</code> file.</p>
<pre><code>```python
import pandas as pd
data = pd.read_csv(&quot;data.csv&quot;)
data.head()
```
</code></pre>
<p>renders as</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">pandas</span> <span class="k">as</span> <span class="nn">pd</span>
</span></span><span class="line"><span class="cl"><span class="n">data</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">read_csv</span><span class="p">(</span><span class="s2">&#34;data.csv&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">data</span><span class="o">.</span><span class="n">head</span><span class="p">()</span>
</span></span></code></pre></div><h3 id="mindmaps">Mindmaps</h3>
<p>Wowchemy supports a Markdown extension for mindmaps.</p>
<p>Simply insert a Markdown <code>markmap</code> code block and optionally set the height of the mindmap as shown in the example below.</p>
<p>A simple mindmap defined as a Markdown list:</p>
<div class="highlight">
<pre class="chroma">
<code>
```markmap {height="200px"}
- Hugo Modules
  - wowchemy
  - wowchemy-plugins-netlify
  - wowchemy-plugins-netlify-cms
  - wowchemy-plugins-reveal
```
</code>
</pre>
</div>
<p>renders as</p>
<div class="markmap" style="height: 200px;">

<pre>- Hugo Modules
  - wowchemy
  - wowchemy-plugins-netlify
  - wowchemy-plugins-netlify-cms
  - wowchemy-plugins-reveal</pre>
</div>

<p>A more advanced mindmap with formatting, code blocks, and math:</p>
<div class="highlight">
<pre class="chroma">
<code>
```markmap
- Mindmaps
  - Links
    - [Wowchemy Docs](https://wowchemy.com/docs/)
    - [Discord Community](https://discord.gg/z8wNYzb)
    - [GitHub](https://github.com/wowchemy/wowchemy-hugo-themes)
  - Features
    - Markdown formatting
    - **inline** ~~text~~ *styles*
    - multiline
      text
    - `inline code`
    -
      ```js
      console.log('hello');
      console.log('code block');
      ```
    - Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
```
</code>
</pre>
</div>
<p>renders as</p>
<div class="markmap" style="height: 500px;">

<pre>- Mindmaps
  - Links
    - [Wowchemy Docs](https://wowchemy.com/docs/)
    - [Discord Community](https://discord.gg/z8wNYzb)
    - [GitHub](https://github.com/wowchemy/wowchemy-hugo-themes)
  - Features
    - Markdown formatting
    - **inline** ~~text~~ *styles*
    - multiline
      text
    - `inline code`
    -
      ```js
      console.log('hello');
      console.log('code block');
      ```
    - Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$</pre>
</div>

<h3 id="charts">Charts</h3>
<p>Wowchemy supports the popular <a href="https://plot.ly/" target="_blank" rel="noopener">Plotly</a> format for interactive charts.</p>
<p>Save your Plotly JSON in your page folder, for example <code>line-chart.json</code>, and then add the <code>{{&lt; chart data=&quot;line-chart&quot; &gt;}}</code> shortcode where you would like the chart to appear.</p>
<p>Demo:</p>




<div id="chart-796812354" class="chart"></div>
<script>
  (function() {
    let a = setInterval( function() {
      if ( typeof window.Plotly === 'undefined' ) {
        return;
      }
      clearInterval( a );

      Plotly.d3.json("./line-chart.json", function(chart) {
        Plotly.plot('chart-796812354', chart.data, chart.layout, {responsive: true});
      });
    }, 500 );
  })();
</script>

<p>You might also find the <a href="http://plotly-json-editor.getforge.io/" target="_blank" rel="noopener">Plotly JSON Editor</a> useful.</p>
<h3 id="math">Math</h3>
<p>Wowchemy supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the <code>math</code> option in your <code>config/_default/params.yaml</code> file.</p>
<p>To render <em>inline</em> or <em>block</em> math, wrap your LaTeX math with <code>{{&lt; math &gt;}}$...${{&lt; /math &gt;}}</code> or <code>{{&lt; math &gt;}}$$...$${{&lt; /math &gt;}}</code>, respectively. (We wrap the LaTeX math in the Wowchemy <em>math</em> shortcode to prevent Hugo rendering our math as Markdown. The <em>math</em> shortcode is new in v5.5-dev.)</p>
<p>Example <strong>math block</strong>:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-latex" data-lang="latex"><span class="line"><span class="cl"><span class="nb">{{</span>&lt; math &gt;<span class="nb">}}</span>
</span></span><span class="line"><span class="cl"><span class="sb">$$</span><span class="nb">
</span></span></span><span class="line"><span class="cl"><span class="nb"></span><span class="nv">\gamma</span><span class="nb">_{n} </span><span class="o">=</span><span class="nb"> </span><span class="nv">\frac</span><span class="nb">{ </span><span class="nv">\left</span><span class="nb"> | </span><span class="nv">\left</span><span class="nb"> </span><span class="o">(</span><span class="nv">\mathbf</span><span class="nb"> x_{n} </span><span class="o">-</span><span class="nb"> </span><span class="nv">\mathbf</span><span class="nb"> x_{n</span><span class="o">-</span><span class="m">1</span><span class="nb">} </span><span class="nv">\right</span><span class="nb"> </span><span class="o">)</span><span class="nb">^T </span><span class="nv">\left</span><span class="nb"> </span><span class="o">[</span><span class="nv">\nabla</span><span class="nb"> F </span><span class="o">(</span><span class="nv">\mathbf</span><span class="nb"> x_{n}</span><span class="o">)</span><span class="nb"> </span><span class="o">-</span><span class="nb"> </span><span class="nv">\nabla</span><span class="nb"> F </span><span class="o">(</span><span class="nv">\mathbf</span><span class="nb"> x_{n</span><span class="o">-</span><span class="m">1</span><span class="nb">}</span><span class="o">)</span><span class="nb"> </span><span class="nv">\right</span><span class="nb"> </span><span class="o">]</span><span class="nb"> </span><span class="nv">\right</span><span class="nb"> |}{</span><span class="nv">\left</span><span class="nb"> </span><span class="nv">\|\nabla</span><span class="nb"> F</span><span class="o">(</span><span class="nv">\mathbf</span><span class="nb">{x}_{n}</span><span class="o">)</span><span class="nb"> </span><span class="o">-</span><span class="nb"> </span><span class="nv">\nabla</span><span class="nb"> F</span><span class="o">(</span><span class="nv">\mathbf</span><span class="nb">{x}_{n</span><span class="o">-</span><span class="m">1</span><span class="nb">}</span><span class="o">)</span><span class="nb"> </span><span class="nv">\right</span><span class="nb"> </span><span class="nv">\|</span><span class="nb">^</span><span class="m">2</span><span class="nb">}
</span></span></span><span class="line"><span class="cl"><span class="nb"></span><span class="s">$$</span>
</span></span><span class="line"><span class="cl"><span class="nb">{{</span>&lt; /math &gt;<span class="nb">}}</span>
</span></span></code></pre></div><p>renders as</p>



$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$

<p>Example <strong>inline math</strong> <code>{{&lt; math &gt;}}$\nabla F(\mathbf{x}_{n})${{&lt; /math &gt;}}</code> renders as 

$\nabla F(\mathbf{x}_{n})$.</p>
<p>Example <strong>multi-line math</strong> using the math linebreak (<code>\\</code>):</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-latex" data-lang="latex"><span class="line"><span class="cl"><span class="nb">{{</span>&lt; math &gt;<span class="nb">}}</span>
</span></span><span class="line"><span class="cl"><span class="sb">$$</span><span class="nb">f</span><span class="o">(</span><span class="nb">k;p_{</span><span class="m">0</span><span class="nb">}^{</span><span class="o">*</span><span class="nb">}</span><span class="o">)</span><span class="nb"> </span><span class="o">=</span><span class="nb"> </span><span class="nv">\begin</span><span class="nb">{cases}p_{</span><span class="m">0</span><span class="nb">}^{</span><span class="o">*</span><span class="nb">} &amp; </span><span class="nv">\text</span><span class="nb">{if }k</span><span class="o">=</span><span class="m">1</span><span class="nb">, </span><span class="nv">\\</span><span class="nb">
</span></span></span><span class="line"><span class="cl"><span class="nb"></span><span class="m">1</span><span class="o">-</span><span class="nb">p_{</span><span class="m">0</span><span class="nb">}^{</span><span class="o">*</span><span class="nb">} &amp; </span><span class="nv">\text</span><span class="nb">{if }k</span><span class="o">=</span><span class="m">0</span><span class="nb">.</span><span class="nv">\end</span><span class="nb">{cases}</span><span class="s">$$</span>
</span></span><span class="line"><span class="cl"><span class="nb">{{</span>&lt; /math &gt;<span class="nb">}}</span>
</span></span></code></pre></div><p>renders as</p>




$$
f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
1-p_{0}^{*} & \text{if }k=0.\end{cases}
$$


<h3 id="diagrams">Diagrams</h3>
<p>Wowchemy supports a Markdown extension for diagrams. You can enable this feature by toggling the <code>diagram</code> option in your <code>config/_default/params.toml</code> file or by adding <code>diagram: true</code> to your page front matter.</p>
<p>An example <strong>flowchart</strong>:</p>
<pre><code>```mermaid
graph TD
A[Hard] --&gt;|Text| B(Round)
B --&gt; C{Decision}
C --&gt;|One| D[Result 1]
C --&gt;|Two| E[Result 2]
```
</code></pre>
<p>renders as</p>
<div class="mermaid">graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
</div>
<p>An example <strong>sequence diagram</strong>:</p>
<pre><code>```mermaid
sequenceDiagram
Alice-&gt;&gt;John: Hello John, how are you?
loop Healthcheck
    John-&gt;&gt;John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John--&gt;&gt;Alice: Great!
John-&gt;&gt;Bob: How about you?
Bob--&gt;&gt;John: Jolly good!
```
</code></pre>
<p>renders as</p>
<div class="mermaid">sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
</div>
<p>An example <strong>Gantt diagram</strong>:</p>
<pre><code>```mermaid
gantt
section Section
Completed :done,    des1, 2014-01-06,2014-01-08
Active        :active,  des2, 2014-01-07, 3d
Parallel 1   :         des3, after des1, 1d
Parallel 2   :         des4, after des1, 1d
Parallel 3   :         des5, after des3, 1d
Parallel 4   :         des6, after des4, 1d
```
</code></pre>
<p>renders as</p>
<div class="mermaid">gantt
section Section
Completed :done,    des1, 2014-01-06,2014-01-08
Active        :active,  des2, 2014-01-07, 3d
Parallel 1   :         des3, after des1, 1d
Parallel 2   :         des4, after des1, 1d
Parallel 3   :         des5, after des3, 1d
Parallel 4   :         des6, after des4, 1d
</div>
<p>An example <strong>class diagram</strong>:</p>
<pre><code>```mermaid
classDiagram
Class01 &lt;|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --&gt; C2 : Where am i?
Class09 --* C3
Class09 --|&gt; Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 &lt;--&gt; C2: Cool label
```
</code></pre>
<p>renders as</p>
<div class="mermaid">classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
</div>
<p>An example <strong>state diagram</strong>:</p>
<pre><code>```mermaid
stateDiagram
[*] --&gt; Still
Still --&gt; [*]
Still --&gt; Moving
Moving --&gt; Still
Moving --&gt; Crash
Crash --&gt; [*]
```
</code></pre>
<p>renders as</p>
<div class="mermaid">stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
</div>
<h3 id="todo-lists">Todo lists</h3>
<p>You can even write your todo lists in Markdown too:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">- [x]</span> Write math example
</span></span><span class="line"><span class="cl">  <span class="k">- [x]</span> Write diagram example
</span></span><span class="line"><span class="cl"><span class="k">- [ ]</span> Do something else
</span></span></code></pre></div><p>renders as</p>
<ul>
<li><input checked="" disabled="" type="checkbox"> Write math example
<ul>
<li><input checked="" disabled="" type="checkbox"> Write diagram example</li>
</ul>
</li>
<li><input disabled="" type="checkbox"> Do something else</li>
</ul>
<h3 id="tables">Tables</h3>
<p>Save your spreadsheet as a CSV file in your page&rsquo;s folder and then render it by adding the <em>Table</em> shortcode to your page:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{&lt;</span> <span class="nx">table</span> <span class="nx">path</span><span class="p">=</span><span class="s">&#34;results.csv&#34;</span> <span class="nx">header</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="nx">caption</span><span class="p">=</span><span class="s">&#34;Table 1: My results&#34;</span> <span class="p">&gt;}}</span>
</span></span></code></pre></div><p>renders as</p>













  



<table class="table">
  
    
    
    <tr>  <th>customer_id</th>  <th>score</th>  </tr>
  
  
    <tr>
      
        
          <td data-table-dtype="number">1</td>
        
      
        
          <td data-table-dtype="number">0</td>
        
      
    </tr>
  
    <tr>
      
        
          <td data-table-dtype="number">2</td>
        
      
        
          <td data-table-dtype="text">0.5</td>
        
      
    </tr>
  
    <tr>
      
        
          <td data-table-dtype="number">3</td>
        
      
        
          <td data-table-dtype="number">1</td>
        
      
    </tr>
  
  
    <caption>Table 1: My results</caption>
  
</table>

<h3 id="callouts">Callouts</h3>
<p>Academic supports a <a href="https://wowchemy.com/docs/content/writing-markdown-latex/#callouts" target="_blank" rel="noopener">shortcode for callouts</a>, also referred to as <em>asides</em>, <em>hints</em>, or <em>alerts</em>. By wrapping a paragraph in <code>{{% callout note %}} ... {{% /callout %}}</code>, it will render as an aside.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{% callout note %}}
</span></span><span class="line"><span class="cl">A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
</span></span><span class="line"><span class="cl">{{% /callout %}}
</span></span></code></pre></div><p>renders as</p>
<div class="alert alert-note">
  <div>
    A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
  </div>
</div>
<h3 id="spoilers">Spoilers</h3>
<p>Add a spoiler to a page to reveal text, such as an answer to a question, after a button is clicked.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">spoiler</span> <span class="na">text</span><span class="o">=</span><span class="s">&#34;Click to view the spoiler&#34;</span> <span class="p">&gt;</span>}}
</span></span><span class="line"><span class="cl">You found me!
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="p">/</span><span class="nt">spoiler</span> <span class="p">&gt;</span>}}
</span></span></code></pre></div><p>renders as</p>
<details class="spoiler "  id="spoiler-6">
  <summary>Click to view the spoiler</summary>
  <p>You found me!</p>
</details>
<h3 id="icons">Icons</h3>
<p>Academic enables you to use a wide range of <a href="https://wowchemy.com/docs/getting-started/page-builder/#icons" target="_blank" rel="noopener">icons from <em>Font Awesome</em> and <em>Academicons</em></a> in addition to <a href="https://wowchemy.com/docs/content/writing-markdown-latex/#emojis" target="_blank" rel="noopener">emojis</a>.</p>
<p>Here are some examples using the <code>icon</code> shortcode to render icons:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">icon</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;terminal&#34;</span> <span class="na">pack</span><span class="o">=</span><span class="s">&#34;fas&#34;</span> <span class="p">&gt;</span>}} Terminal  
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">icon</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;python&#34;</span> <span class="na">pack</span><span class="o">=</span><span class="s">&#34;fab&#34;</span> <span class="p">&gt;</span>}} Python  
</span></span><span class="line"><span class="cl">{{<span class="p">&lt;</span> <span class="nt">icon</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;r-project&#34;</span> <span class="na">pack</span><span class="o">=</span><span class="s">&#34;fab&#34;</span> <span class="p">&gt;</span>}} R
</span></span></code></pre></div><p>renders as</p>
<p>
  <i class="fas fa-terminal  pr-1 fa-fw"></i> Terminal<br>

  <i class="fab fa-python  pr-1 fa-fw"></i> Python<br>

  <i class="fab fa-r-project  pr-1 fa-fw"></i> R</p>
<h3 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌</h3>

    </div>

    







<div class="share-box">
  <ul class="share">
    
      
      
      
        
      
      
      
      
      
      
      
      <li>
        <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Ffitsir.gitee.io%2Frobot%2Fpost%2Fwriting-technical-content%2F&amp;text=Writing&#43;technical&#43;content&#43;in&#43;Markdown" target="_blank" rel="noopener" class="share-btn-twitter" aria-label="twitter">
          <i class="fab fa-twitter"></i>
        </a>
      </li>
    
      
      
      
        
      
      
      
      
      
      
      
      <li>
        <a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Ffitsir.gitee.io%2Frobot%2Fpost%2Fwriting-technical-content%2F&amp;t=Writing&#43;technical&#43;content&#43;in&#43;Markdown" target="_blank" rel="noopener" class="share-btn-facebook" aria-label="facebook">
          <i class="fab fa-facebook"></i>
        </a>
      </li>
    
      
      
      
        
      
      
      
      
      
      
      
        
      
      <li>
        <a href="mailto:?subject=Writing%20technical%20content%20in%20Markdown&amp;body=https%3A%2F%2Ffitsir.gitee.io%2Frobot%2Fpost%2Fwriting-technical-content%2F" target="_blank" rel="noopener" class="share-btn-email" aria-label="envelope">
          <i class="fas fa-envelope"></i>
        </a>
      </li>
    
      
      
      
        
      
      
      
      
      
      
      
      <li>
        <a href="https://www.linkedin.com/shareArticle?url=https%3A%2F%2Ffitsir.gitee.io%2Frobot%2Fpost%2Fwriting-technical-content%2F&amp;title=Writing&#43;technical&#43;content&#43;in&#43;Markdown" target="_blank" rel="noopener" class="share-btn-linkedin" aria-label="linkedin-in">
          <i class="fab fa-linkedin-in"></i>
        </a>
      </li>
    
      
      
      
        
      
      
      
      
      
      
      
      <li>
        <a href="whatsapp://send?text=Writing&#43;technical&#43;content&#43;in&#43;Markdown%20https%3A%2F%2Ffitsir.gitee.io%2Frobot%2Fpost%2Fwriting-technical-content%2F" target="_blank" rel="noopener" class="share-btn-whatsapp" aria-label="whatsapp">
          <i class="fab fa-whatsapp"></i>
        </a>
      </li>
    
      
      
      
        
      
      
      
      
      
      
      
      <li>
        <a href="https://service.weibo.com/share/share.php?url=https%3A%2F%2Ffitsir.gitee.io%2Frobot%2Fpost%2Fwriting-technical-content%2F&amp;title=Writing&#43;technical&#43;content&#43;in&#43;Markdown" target="_blank" rel="noopener" class="share-btn-weibo" aria-label="weibo">
          <i class="fab fa-weibo"></i>
        </a>
      </li>
    
  </ul>
</div>











  
  



  
  
  
  
  
  <div class="media author-card content-widget-hr">
    
      
      <img class="avatar mr-3 avatar-circle" src="/robot/authors/lei-guo/avatar_hube350cae9c7ebe2ed4a58d0f8e0a54cc_2104099_270x270_fill_q75_lanczos_center.jpg" alt="L G">
    

    <div class="media-body">
      <h5 class="card-title">L G</h5>
      <h6 class="card-subtitle">Professor of Artificial Intelligence</h6>
      <p class="card-text">My research interests include distributed robotics, mobile computing and programmable matter.</p>
      <ul class="network-icon" aria-hidden="true">
  
    
    
    
      
    
    
    
    
    
    <li>
      <a href="mailto:test@example.org" >
        <i class="fas fa-envelope"></i>
      </a>
    </li>
  
    
    
    
      
    
    
    
    
    
      
    
    <li>
      <a href="https://twitter.com/GeorgeCushen" target="_blank" rel="noopener">
        <i class="fab fa-twitter"></i>
      </a>
    </li>
  
    
    
    
    
    
    
    
      
    
    <li>
      <a href="https://scholar.google.co.uk/citations?user=sIwtMXoAAAAJ" target="_blank" rel="noopener">
        <i class="ai ai-google-scholar"></i>
      </a>
    </li>
  
    
    
    
      
    
    
    
    
    
      
    
    <li>
      <a href="https://github.com/gcushen" target="_blank" rel="noopener">
        <i class="fab fa-github"></i>
      </a>
    </li>
  
</ul>

    </div>
  </div>


















  </div>
</article>
  </div>

  <div class="page-footer">
    
    
    <div class="container">
      <footer class="site-footer">

  












  
  
  
  
  













  
  
  

  
  
    
  
  
    
  

  

  
  <p class="powered-by copyright-license-text">
    © 2023 Me. This work is licensed under <a href="https://creativecommons.org/licenses/by-nc-nd/4.0" rel="noopener noreferrer" target="_blank">CC BY NC ND 4.0</a>
  </p>
  

  <p class="powered-by footer-license-icons">
    <a href="https://creativecommons.org/licenses/by-nc-nd/4.0" rel="noopener noreferrer" target="_blank" aria-label="Creative Commons">
      <i class="fab fa-creative-commons fa-2x" aria-hidden="true"></i>
      <i class="fab fa-creative-commons-by fa-2x" aria-hidden="true"></i>
      
        <i class="fab fa-creative-commons-nc fa-2x" aria-hidden="true"></i>
      
      
        <i class="fab fa-creative-commons-nd fa-2x" aria-hidden="true"></i>
      
    </a>
  </p>





  <p class="powered-by">
    
    
    
      
      
      
      
      
      
      Published with <a href="https://wowchemy.com/?utm_campaign=poweredby" target="_blank" rel="noopener">Wowchemy</a> — the free, <a href="https://github.com/wowchemy/wowchemy-hugo-themes" target="_blank" rel="noopener">open source</a> website builder that empowers creators.
    
  </p>
</footer>

    </div>
    
  </div>

  


<script src="/robot/js/vendor-bundle.min.f64289d8217e08e3afcd597d60836062.js"></script>




  

  
  

  
    
    <script src="https://cdn.jsdelivr.net/npm/mermaid@9.1.3/dist/mermaid.min.js" integrity="sha256-TIYL00Rhw/8WaoUhYTLX9SKIEFdXxg+yMWSLVUbhiLg=" crossorigin="anonymous" title="mermaid"></script>
  













  
  <script id="search-hit-fuse-template" type="text/x-template">
    <div class="search-hit" id="summary-{{key}}">
      <div class="search-hit-content">
        <div class="search-hit-name">
          <a href="{{relpermalink}}">{{title}}</a>
          <div class="article-metadata search-hit-type">{{type}}</div>
          <p class="search-hit-description">{{snippet}}</p>
        </div>
      </div>
    </div>
  </script>
  
    <script src="https://cdn.jsdelivr.net/gh/krisk/Fuse@v3.2.1/dist/fuse.min.js" integrity="sha512-o38bmzBGX+hD3JHWUFCDA09btWaqrNmoJ3RXLlrysA7PP01Kgs4UlE4MhelE1v5dJR3+cxlR4qQlotsW7jKsnw==" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/julmot/mark.js@8.11.1/dist/jquery.mark.min.js" integrity="sha512-mhbv5DqBMgrWL+32MmsDOt/OAvqr/cHimk6B8y/bx/xS88MVkYGPiVv2ixKVrkywF2qHplNRUvFsAHUdxZ3Krg==" crossorigin="anonymous"></script>
  




  <script src="https://cdn.jsdelivr.net/gh/plotly/plotly.js@v1.55.2/dist/plotly.min.js" integrity="sha512-gttPT9uTUiaLBj6XZdcB0ydKXiDaBwstInkN4Qvp1Nz3iwXNc8TTQplIEPIGxyJBDqERjwkKxf2OyO47/0EHbQ==" crossorigin="anonymous"></script>









  
  
  
  
  
  
  

















<script id="page-data" type="application/json">{"use_headroom":true}</script>


  <script src="/robot/js/wowchemy-headroom.db4755770454eb63685f8de785c0a172.js" type="module"></script>
<style>
    .markmap > svg {
      width: 100%;
      height: 100%;
    }
  </style>
  <script>
    window.markmap = {
      autoLoader: {
        manual: false,
        onReady() {
          const { autoLoader, builtInPlugins } = window.markmap;
          
          autoLoader.transformPlugins = builtInPlugins.filter(plugin => plugin.name !== 'prism');
        },
      },
    };
  </script>
  <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader"></script>









  
  


<script src="/robot/en/js/wowchemy.min.3322c0d94f0e691b0b24c63f4c41064b.js"></script>







  
<div id="modal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Cite</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        
        <pre><code></code></pre>
      </div>
      <div class="modal-footer">
        <a class="btn btn-outline-primary my-1 js-copy-cite" href="#" target="_blank">
          <i class="fas fa-copy"></i> Copy
        </a>
        <a class="btn btn-outline-primary my-1 js-download-cite" href="#" target="_blank">
          <i class="fas fa-download"></i> Download
        </a>
        <div id="modal-error"></div>
      </div>
    </div>
  </div>
</div>


  <script src="/robot/js/wowchemy-publication.68f8d7090562ca65fc6d3cb3f8f2d2cb.js" type="module"></script>


















</body>
</html>
